<template lang="html">
  <sui-segment inverted>
    <sui-statistics-group>
      <sui-statistic inverted>
        <sui-statistic-value>
          54
        </sui-statistic-value>
        <sui-statistic-label>
          Inverted
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="red" inverted>
        <sui-statistic-value>
          27
        </sui-statistic-value>
        <sui-statistic-label>
          Red
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="orange" inverted>
        <sui-statistic-value>
          8
        </sui-statistic-value>
        <sui-statistic-label>
          Orange
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="yellow" inverted>
        <sui-statistic-value>
          28
        </sui-statistic-value>
        <sui-statistic-label>
          Yellow
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="olive" inverted>
        <sui-statistic-value>
          7
        </sui-statistic-value>
        <sui-statistic-label>
          Olive
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="green" inverted>
        <sui-statistic-value>
          14
        </sui-statistic-value>
        <sui-statistic-label>
          Green
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="teal" inverted>
        <sui-statistic-value>
          82
        </sui-statistic-value>
        <sui-statistic-label>
          Teal
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="blue" inverted>
        <sui-statistic-value>
          1
        </sui-statistic-value>
        <sui-statistic-label>
          Blue
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="violet" inverted>
        <sui-statistic-value>
          22
        </sui-statistic-value>
        <sui-statistic-label>
          Violet
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="purple" inverted>
        <sui-statistic-value>
          23
        </sui-statistic-value>
        <sui-statistic-label>
          Purple
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="pink" inverted>
        <sui-statistic-value>
          15
        </sui-statistic-value>
        <sui-statistic-label>
          Pink
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="brown" inverted>
        <sui-statistic-value>
          36
        </sui-statistic-value>
        <sui-statistic-label>
          Brown
        </sui-statistic-label>
      </sui-statistic>
      <sui-statistic color="grey" inverted>
        <sui-statistic-value>
          49
        </sui-statistic-value>
        <sui-statistic-label>
          Grey
        </sui-statistic-label>
      </sui-statistic>
    </sui-statistics-group>
  </sui-segment>
</template>

<script>
export default {
  name: 'StatisticInvertedExample',
};
</script>
